<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div v-html="html"></div>
    <div>{{html}} Date.now = {{time}}</div>
    <hr>

    <div>
      <form action="dfd.html" @submit.prevent = "onsubmit()">
        <input type="submit" value="submit"/><label>{{info}}</label>
      </form>
    </div>
    <hr>

    <div style="text-align: left">
      Ask a question: <input type="text" v-model="question" placeholder="Input a question ending with ?"/><br/>
      Answer: <span>{{answer}}</span>
    </div>

    <span :style="{color: number % 2 ===0 ? 'red' : 'green'}" v-for="number in numbers">{{number}}</span>

    <hr>

    <input type="text" v-model="todoInput" @keyup.enter="addTodo()"/>
    <ul>
      <todo-item v-for="(todo, index) in todos" :item="todo" :index="index" @remove="removeTodo(index)" v-bind:key="todo.id"></todo-item>
    </ul>


    <counter :bus="bus" @increment="addTotal"></counter>
    <counter :bus="bus" @increment="addTotal"></counter>
    <counter :bus="bus" @increment="addTotal"></counter><br>
    Total: <span>{{total}}</span><br>


    <my-checkbox :bus="bus" v-model="checked" value="Executive"></my-checkbox>

    <panel>
      <h3 slot="title">Hello world!</h3>
      <p>content</p>
    </panel>

    <select @change="onSelectChanged">
      <option value="Counter">Counter</option>
      <option value="panel">panel</option>
      <option value="my-checkbox">my-checkbox</option>
    </select>
    <component :is="currentView">

    </component>
  </div>
</template>

<script>
import _ from 'lodash';
import axios from 'axios'
import todoItem from './TodoItem.vue'
import Counter from "./child/Counter";
import myCheckbox from "./child/my-checkbox";
import Vue from 'vue'
import panel from './child/panel'
export default {
  name: 'test',
  components:{
      "Counter": Counter,
      "panel": panel,
      "todo-item": todoItem,
      "my-checkbox": myCheckbox
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      html: '<span style="color: red">This is a html fragment!</span>',
      info: 'Click submit',

      question: '',
      answer: "",

      numbers: [1,2,3,4,5,6,7],

      todoInput: '',
      todos: ['dfsfs'],

      total: 0,

      checked: true,

      bus: new Vue(),

      currentView: 'panel'
    }
  },
  computed:{
    time: function () {
      return Date.now();
    },
    eventNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0;
      })
    }
  },
  methods:{
      even: function (numbers) {
        return this.numbers.filter(function (number) {
          return number % 2 === 0;
        })
      },
      onsubmit: function () {

        var obj1 = {
                    name: 'obj1',
                    getName: function () {
                      return this.name;
                    }};
        var obj2 = Object.create(obj1);
        obj2.name='obj2';

        this.info = obj2.getName();

        console.log(this.checked);
      },

      getAnswer: _.debounce(function () {
                      console.log('debounce')

                      var vm = this;
                      vm.answer = "Thinking...";

                      axios.get("https://yesno.wtf/api")
                        .then(function (response) {
                            vm.answer = response.data.answer;
                      })
                        .catch(function (error) {
                          vm.answer = error;
                        })

                  },500),
    addTodo: function () {
      console.log('addTodo')
      this.todos.push(this.todoInput);
    },
    removeTodo: function (index) {
      console.log('removeTodo')
      this.todos.splice(index,1)
    },

    addTotal: function () {
      this.total++;
    },

    onSelectChanged: function (event) {
      var select  = event.target;
      this.currentView = select.options[select.selectedIndex].value;
    }
  },
  watch: {
      question: function (newQuestion) {
        this.answer = "Typing...";
        console.log('this.getAnswer()')
        this.getAnswer();
      },
      checked: function (newState) {
        console.log("checked changed to " + newState)
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
